<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/session.jsp"%>
<c:set var="categoryId" value="${param.categoryId}" />
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <title></title>
    <link rel="stylesheet" href="${ctx}/css/default.css"/>
    <script type="text/javascript" src="${ctx}/js/xtable.js"></script>
    <script type="text/javascript" src="${ctx}/js/calendar/WdatePicker.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/CategoryService.js'></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/VideoService.js'></script>
    <script type="text/javascript" src="${ctx}/js/loading.js"></script>
</head>
<body onload="selectCategory()">
<table width="100%">
    <tr>
        <td valign="top">
            <form id="videoForm" name="videoForm" onsubmit="return submitVideo();">
                <input type="hidden" id="videoId" name="videoId" value="">
                <input type="hidden" id="videoCover" name="videoCover">
                <table width="100%" height="100%" cellspacing="5" cellpadding="5">
                    <tr>
                        <td>
                            <input type="file" id="videoCoverFile" name="videoCoverFile" style="display: none;" placeholder="视频封面" accept="image/jpeg" onchange="$('videoCoverButton').innerText=this.value;$('videoTitle').value=this.value.substring(this.value.lastIndexOf('\\') + 1, this.value.lastIndexOf('.'));"/>
                            <button type="button" id="videoCoverButton" name="videoCoverButton" style="width: 100%" onclick="document.videoForm.videoCoverFile.click()">上传视频封面</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="videoTitle" name="videoTitle" maxlength="50" placeholder="视频名称" required/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="videoAuthor" name="videoAuthor" maxlength="50" placeholder="视频作者"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="videoSource" name="videoSource" maxlength="200" placeholder="视频来源"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select id="categoryId" name="categoryId" required>
                                <option value="">请选择类别</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <button type="button" onclick="selectVideoPage()">查询视频</button>
                            <button type="button" onclick="insertVideo()">新增视频</button>
                            <button type="button" onclick="updateVideo()">修改视频</button>
                            <button type="button" onclick="deleteVideo()" id="deleteVideoButton">删除视频</button>
                            <button type="submit" id="submitVideoButton" style="visibility: hidden"></button>
                        </td>
                    </tr>
                </table>
            </form>
        </td>
        <td valign="top">
            <form id="videoChapterForm" name="videoChapterForm" onsubmit="return submitVideoChapter();">
                <input type="hidden" id="videoChapterId" name="videoChapterId" value="">
                <input type="hidden" id="videoChapterFile" name="videoChapterFile">
                <table width="100%" height="100%" cellspacing="5" cellpadding="5">
                    <tr>
                        <td>
                            <input type="file" id="videoChapterFileFile" name="videoChapterFileFile" style="display: none;" placeholder="分集文件" accept="application/mp4" onchange="$('videoChapterFileButton').innerText=this.value;$('videoChapterTitle').value=this.value.substring(this.value.lastIndexOf('\\') + 1, this.value.lastIndexOf('.'));"/>
                            <button type="button" id="videoChapterFileButton" name="videoChapterFileButton" style="width: 100%" onclick="document.videoChapterForm.videoChapterFileFile.click()">上传分集文件</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="videoChapterTitle" name="videoChapterTitle" maxlength="50" placeholder="分集名称" required/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="number" id="videoChapterTimes" name="videoChapterTimes" step="1" placeholder="分集时间"/>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <button type="button" onclick="insertVideoChapter()">新增分集</button>
                            <button type="button" onclick="updateVideoChapter()">修改分集</button>
                            <button type="button" onclick="deleteVideoChapter()">删除分集</button>
                            <button type="submit" id="submitVideoChapterButton" style="visibility: hidden"></button>
                        </td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
    <tr>
        <td valign="top">
            <SCRIPT LANGUAGE="JavaScript" >
                var videoThead = new Array(
                    new XThead("选择", "radio"),
                    new XThead("视频名称"),
                    new XThead("视频封面")
                );

                var videoXTable = new XTable("video", videoThead);

                videoXTable.XTbodyArray = function (model) {
                    var array = new Array(
                        new XTbody("video", model.videoId, "radio", "onclick='setVideo(this)'", model),
                        new XTbody("video", model.videoTitle),
                        new XTbody("video", "<a href='" + model.videoCover + "' target='_blank'><img width=50 height=60 style='border:1px solid #c9c9c9' onerror='' src='" + model.videoCover + "'/></a>", "string", null, null, "center")
                    );
                    return array;
                }

                videoXTable.getXList = function (page){
                    var video = dwr.util.getValues("videoForm");
                    video.pageIndex = page;
                    video.pageSize = videoXTable.pageSize;
                    VideoService.selectVideoList(video, function(list){videoXTable.addTable(list);});
                }

                function selectVideoPage(){
                    var video = dwr.util.getValues("videoForm");
                    VideoService.selectVideoNum(video, function(num){videoXTable.setTotalPage(num);});
                }
            </SCRIPT>
        </td>
        <td valign="top">
            <SCRIPT LANGUAGE="JavaScript" >
                var videoChapterThead = new Array(
                    new XThead("选择", "radio"),
                    new XThead("分集名称"),
                    new XThead("查看")
                );

                var videoChapterXTable = new XTable("videoChapter", videoChapterThead, true);

                videoChapterXTable.XTbodyArray = function (model) {
                    var array = new Array(
                        new XTbody("videoChapter", model.videoChapterId, "radio", "onclick='setVideoChapter(this)'", model),
                        new XTbody("videoChapter", model.videoChapterTitle),
                        new XTbody("videoChapter", "<a href='" + model.videoChapterUrl + "' target='_blank'>查看</a>", "string", null, null, "center")
                    );
                    return array;
                }

                videoChapterXTable.getXList = function (page){
                    var videoChapter = dwr.util.getValues("videoChapterForm");
                    videoChapter.videoId = dwr.util.getValue("videoId");
                    VideoService.selectVideoChapterList(videoChapter, function(list){
                        if (list.length > 0) {
                            $("deleteVideoButton").style.display = "none";
                        } else {
                            $("deleteVideoButton").style.display = "block";
                        }
                        videoChapterXTable.addTable(list);
                    });
                }
            </SCRIPT>
        </td>
    </tr>
</table>
</body>
</html>
<script>
    function selectCategory() {
        var category = new Category();
        category.categoryParentId = 2;
        CategoryService.selectCategoryList(category, function(list){
            dwr.util.addOptions("categoryId", list, "categoryId", "categoryName");
            dwr.util.setValue("categoryId", "${categoryId}");
            selectVideoPage();
        });
    }

    function setVideo(obj) {
        var video = obj.parentElement.parentElement.model;
        dwr.util.setValues(video);
        videoChapterXTable.goPage(1);
    }

    function submitVideo() {
        var videoId = dwr.util.getValue("videoId");
        var confirmMsg = videoId ? "确定修改视频" : "确定新增视频";
        if (confirm(confirmMsg)) {
            var video = dwr.util.getValues("videoForm");
            var videoCoverValue = document.getElementById("videoCoverFile").value;
            var videoCoverFile = videoCoverValue == "" ? null : dwr.util.getValue("videoCoverFile");
            if (videoId) {
                VideoService.updateVideo(video, videoCoverFile, selectVideoPage);
            } else {
                if (videoCoverValue == "") {
                    alert("请添加视频封面")
                    return false;
                }
                VideoService.insertVideo(video, videoCoverFile, selectVideoPage);
            }
        }
        return false;
    }

    function insertVideo() {
        dwr.util.setValue("videoId", "");
        $("submitVideoButton").click();
    }

    function updateVideo() {
        var videoId = dwr.util.getValue("videoId");
        if (!videoId) {
            alert("请选择要修改的视频");
            return false;
        }
        $("submitVideoButton").click();
    }

    function deleteVideo() {
        var videoId = dwr.util.getValue("videoId");
        if (!videoId) {
            alert("请选择要删除的视频");
            return false;
        }
        if (confirm("确定删除视频")) {
            var video = dwr.util.getValues("videoForm");
            VideoService.deleteVideo(video, selectVideoPage);
        }
    }

    function setVideoChapter(obj) {
        var videoChapter = obj.parentElement.parentElement.model;
        dwr.util.setValues(videoChapter);
    }

    function submitVideoChapter() {
        var videoChapterId = dwr.util.getValue("videoChapterId");
        var videoId = dwr.util.getValue("videoId");
        var confirmMsg = videoChapterId ? "确定修改分集" : "确定新增分集";
        if (confirm(confirmMsg)) {
            var videoChapter = dwr.util.getValues("videoChapterForm");
            var videoChapterFileValue = document.getElementById("videoChapterFileFile").value;
            var videoChapterFileFile = videoChapterFileValue == "" ? null : dwr.util.getValue("videoChapterFileFile");
            if (videoChapterId) {
                VideoService.updateVideoChapter(videoChapter, videoChapterFileFile, function () {
                    videoChapterXTable.goPage(1);
                });
            } else {
                if (videoChapterFileValue == "") {
                    alert("请添加分集文件")
                    return false;
                }
                if (!videoId) {
                    alert("请选择所属视频")
                    return false;
                }
                videoChapter.videoId = videoId;
                VideoService.insertVideoChapter(videoChapter, videoChapterFileFile, function () {
                    videoChapterXTable.goPage(1);
                });
            }
        }
        return false;
    }

    function insertVideoChapter() {
        dwr.util.setValue("videoChapterId", "");
        $("submitVideoChapterButton").click();
    }

    function updateVideoChapter() {
        var videoChapterId = dwr.util.getValue("videoChapterId");
        if (!videoChapterId) {
            alert("请选择要修改的分集");
            return false;
        }
        $("submitVideoChapterButton").click();
    }

    function deleteVideoChapter() {
        var videoChapterId = dwr.util.getValue("videoChapterId");
        if (!videoChapterId) {
            alert("请选择要删除的分集");
            return false;
        }
        if (confirm("确定删除分集")) {
            var videoChapter = dwr.util.getValues("videoChapterForm");
            VideoService.deleteVideoChapter(videoChapter, function () {
                videoChapterXTable.goPage(1);
            });
        }
    }
</script>
